<template>
	<view>
		<!-- 头部广告 -->
		<view class="lb-banner">
			<u-swiper height="360rpx" radius="0" :circular="true" :list="topBanner" keyName="image"></u-swiper>
		</view>
		<view class="video-box" v-if="videoInfo.switch">
			<video id="myVideo" class="video-info" :src="getImgUrl(videoInfo.url_file)" controls autoplay loop></video>
			<u-icon @click="closeVideo" name="close-circle-fill" color="#00D26E" size="28"></u-icon>
		</view>
		<view class="lb-main">
			<!-- 菜单 -->
			<view class="lb-grid-5" v-if="menuIndex == 2">
				<view class="grid-item" v-for="(item,index) in menuData" :key="index" @click="goTo(item.url)">
					<view class="item-icon" :class="'bg' + index">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="item-label">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 菜单导航 -->
			<view class="lb-menu" v-if="menuIndex == 1">
				<view class="lb-item" v-for="(item,index) in menuData" :key="index" @click="goTo(item.url)">
					<view class="img-bg">
						<image :src="item.bg_img" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="img">
						<image :src="item.icon" mode=""></image>
					</view>
				</view>
			</view>

			<view class="notice" v-if="noticeText">
				<image class="icon" v-if="noticeIcon" :src="noticeIcon" mode="aspectFill"></image>
				<u-notice-bar class="content-box" :icon="null" color="#333" bgColor="transparent" :text="noticeText"></u-notice-bar>
			</view>

			<view :style="'background: url('+vip_bg+')no-repeat center/cover;'"
				@click="goTo('/pages/vip-center/vip-center')" class="lb-vip">
			</view>
      <!-- 免单 -->
      <view :style="'background: url('+free_bg+')no-repeat center/cover;'" class="lb-vip"
            @click="goTo('/pages/free/list')">
      </view>

			<!-- 秒杀 -->
			<view :style="'background: url('+ms_bg+')no-repeat center/cover;'" class="lb-vip"
				@click="goTo('/pages/flash-killing/flash-killing')">
				<!-- <view class="vip-left">
					<view class="vip-top">
						<view class="text">
							<text>秒杀活动</text>
						</view>
					</view>

				</view>
				<view class="vip-right" @click="goTo('/pages/vip-center/vip-center')">
					立即秒杀
				</view> -->
			</view>
			<!-- 优惠券 -->
			<view class="lb-coupon" @click="goTo('/pages/xi-hu/coupon/coupon')">
				<image :src="youhui_bg?youhui_bg:'/static/xi-hu/img/coupon.png'" mode=""></image>
			</view>


			<!-- 洗护广告 -->
			<view class="lb-c-banner">
				<u-swiper :list="bannerC" keyName="image" @change="e => current = e.current" :autoplay="false"
					height="172rpx">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in bannerC" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>


			<view class="lb-title">
				<image src="/static/icon/7.png" mode=""></image>
				<text>热门推荐</text>
			</view>
			<view class="lb-ad" v-for="(item,index) in activityGoods" :key="item.id">
				<view class="ad-img" @click="goTo('/pages/xi-hu/goods-detail/goods-detail?id=' + item.id)">
					<image :src="getImgUrl(item.cover_image)" mode="aspectFill"></image>
				</view>
				<view class="ad-info" @click="goTo('/pages/xi-hu/goods-detail/goods-detail?id=' + item.id)">
					<view class="ad-name u-line-2">
						{{item.name}}
					</view>
					<view class="ad-price">
						<view class="left">{{item.a_price || item.price || 0}}</view>
						<view class="right" v-if="item.amount > 1">任洗{{item.amount}}件</view>
					</view>
					<view class="vip-price" v-if="item.v_price && item.v_price > 0">
						<image src="/static/icon/vip-zx.png" mode=""></image>
						<text>￥{{item.v_price || ''}}</text>
					</view>
					<view class="ad-btn">
						热门商品
					</view>
					<view class="ad-icon">
						<image src="/static/icon/8.png" mode=""></image>
					</view>
				</view>
			</view>



			<!-- 美容广告 -->
			<view class="lb-c-banner">
				<u-swiper :list="beautify_banner" keyName="image" @change="e => current = e.current" :autoplay="false"
					height="172rpx">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in beautify_banner" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<view class="lb-title">
				<image src="/static/icon/7.png" mode=""></image>
				<text>热门推荐</text>
			</view>
			<view class="lb-ad" v-for="(item,index) in beautifyGoods" :key="item.id">
				<view class="ad-img" @click="goTo('/pages/mei-rong/goods-detail/goods-detail?id=' + item.id)">
					<image :src="getImgUrl(item.cover_image)" mode="aspectFill"></image>
				</view>
				<view class="ad-info" @click="goTo('/pages/mei-rong/goods-detail/goods-detail?id=' + item.id)">
					<view class="ad-name u-line-2">
						{{item.name}}
					</view>
					<view class="ad-price">
						<view class="left">{{item.a_price || item.price || 0}}</view>
					</view>
					<view class="vip-price" v-if="item.v_price && item.v_price > 0">
						<image src="/static/icon/vip-zx.png" mode=""></image>
						<text>￥{{item.v_price || ''}}</text>
					</view>
					<view class="ad-btn">
						热门商品
					</view>
					<view class="ad-icon">
						<image src="/static/icon/8.png" mode=""></image>
					</view>
				</view>
			</view>


			<!-- 驾考广告 -->
<!--			<view class="lb-c-banner">-->
<!--				<u-swiper :list="travel_banner" keyName="image" @change="e => current = e.current" :autoplay="false"-->
<!--					height="172rpx">-->
<!--					<view slot="indicator" class="indicator">-->
<!--						<view class="indicator__dot" v-for="(item, index) in travel_banner" :key="index"-->
<!--							:class="[index === current && 'indicator__dot&#45;&#45;active']">-->
<!--						</view>-->
<!--					</view>-->
<!--				</u-swiper>-->
<!--			</view>-->
<!--			<view class="lb-title">-->
<!--				<image src="/static/icon/7.png" mode=""></image>-->
<!--				<text>热门推荐</text>-->
<!--			</view>-->
<!--			<view class="lb-ad" v-for="(item,index) in travelGoods" :key="item.id">-->
<!--				<view class="ad-img" @click="goTo('/pages/jia-kao/goods-detail/goods-detail?id=' + item.id)">-->
<!--					<image :src="getImgUrl(item.cover_image)" mode="aspectFill"></image>-->
<!--				</view>-->
<!--				<view class="ad-info" @click="goTo('/pages/jia-kao/goods-detail/goods-detail?id=' + item.id)">-->
<!--					<view class="ad-name u-line-2">-->
<!--						{{item.name}}-->
<!--					</view>-->
<!--					<view class="ad-price">-->
<!--						<view class="left">{{item.a_price || item.price || 0}}</view>-->
<!--					</view>-->
<!--					<view class="vip-price" v-if="item.v_price && item.v_price > 0">-->
<!--						<image src="/static/icon/vip-zx.png" mode=""></image>-->
<!--						<text>￥{{item.v_price || ''}}</text>-->
<!--					</view>-->
<!--					<view class="ad-btn">-->
<!--						热门商品-->
<!--					</view>-->
<!--					<view class="ad-icon">-->
<!--						<image src="/static/icon/8.png" mode=""></image>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->



			<!-- xmy广告 -->
			<view class="lb-c-banner">
				<u-swiper :list="xmy_banner" keyName="image" @change="e => current = e.current" :autoplay="false"
					height="172rpx">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in xmy_banner" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<view class="lb-title">
				<image src="/static/icon/7.png" mode=""></image>
				<text>热门推荐</text>
			</view>
			<view class="lb-ad" v-for="(item,index) in xmyGoods" :key="item.id">
				<view class="ad-img" @click="goTo('/pages/xmy/goods-detail/goods-detail?id=' + item.id)">
					<image :src="getImgUrl(item.cover_image)" mode="aspectFill"></image>
				</view>
				<view class="ad-info" @click="goTo('/pages/xmy/goods-detail/goods-detail?id=' + item.id)">
					<view class="ad-name u-line-2">
						{{item.name}}
					</view>
					<view class="ad-price">
						<view class="left">{{item.a_price || item.price || 0}}</view>
					</view>
					<view class="vip-price" v-if="item.v_price && item.v_price > 0">
						<image src="/static/icon/vip-zx.png" mode=""></image>
						<text>￥{{item.v_price || ''}}</text>
					</view>
					<view class="ad-btn">
						热门商品
					</view>
					<view class="ad-icon">
						<image src="/static/icon/8.png" mode=""></image>
					</view>
				</view>
			</view>


		</view>

		<tabbar :numb="0"></tabbar>
		<tipPop></tipPop>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import {
		getHomeApiData,
		getWashGoodsHotApiDetail,
		beautifyRecommendGoods,
		travelRecommendGoods,
		xmyRecommendGoods,
		getSysCategory,
		getVideo
	} from "@/api/apis/comm.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				vip_bg: '',
				ms_bg: '',
        free_bg:'',
				menuIndex: 2,
				topBanner: [],
				menuData: [],
				current: 0,
				bannerC: [],
				beautify_banner: [],
				travel_banner: [],
				xmy_banner: [],
				keyword: '',
				activityGoods: [],
				beautifyGoods: [],
				travelGoods: [],
				xmyGoods: [],
				equity: [],
				youhui_bg: '',
				videoInfo: {},
				noticeIcon: '',
				noticeText: ''
			}
		},

		methods: {
			getMenu() {
				getSysCategory().then(res => {
					this.menuData = res.data.map(item => {
						return {
							name: item.name,
							icon: setImgUrl(item.image),
							bg_img: '/static/bg-imgs/home-4.png',
							url: item.url
						}
					})
				})
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.$u.vuex('tipPop', true)
					return;
				}

			},
			getImgUrl(url) {
				return setImgUrl(url);
			},

			getHome() {
				getHomeApiData().then(res => {
					if (res.code == 1) {
						//banner
						this.topBanner = res.data.banner;
						this.topBanner.forEach((val, key) => {
							val.image = setImgUrl(val.image);
						});
						this.equity = res.data.equity;
						//中间banner
						this.bannerC = res.data.wash_banner;
						this.bannerC.forEach((val, key) => {
							val.image = setImgUrl(val.image);
						});

						this.beautify_banner = res.data.beautify_banner.map(item => {
							item.image = setImgUrl(item.image);
							return item
						})
						this.travel_banner = res.data.travel_banner.map(item => {
							item.image = setImgUrl(item.image);
							return item
						})
						this.xmy_banner = res.data.xmy_banner.map(item => {
							item.image = setImgUrl(item.image);
							return item
						})

						this.vip_bg = setImgUrl(res.data.vip_bg);
						this.ms_bg = setImgUrl(res.data.ms_bg);
						this.youhui_bg = setImgUrl(res.data.youhui_bg);
            this.free_bg = setImgUrl(res.data.free_bg);


            this.noticeIcon = setImgUrl(res.data.notice_icon)
						this.noticeText = res.data.notice_text.replace(/\n/g, "");
					}
				})
			},
			getHotGoods() {
				getWashGoodsHotApiDetail({
					is_recommend: 1,
					page: 1,
					limit: 4,
				}).then(res => {
					//活动商品
					this.activityGoods = res.data
				})
				beautifyRecommendGoods({
					is_recommend: 1,
					page: 1,
					limit: 4,
				}).then(res => {
					//活动商品
					this.beautifyGoods = res.data
				})

				travelRecommendGoods({
					is_recommend: 1,
					page: 1,
					limit: 4,
				}).then(res => {
					//活动商品
					this.travelGoods = res.data
				})

				xmyRecommendGoods({
					is_recommend: 1,
					page: 1,
					limit: 4,
				}).then(res => {
					//活动商品
					this.xmyGoods = res.data
				})
			},
			//获取经纬度
			getVLocation() {

				let _this = this;
				if (this.currentLocation && this.currentLocation != undefined) {
					// return;
				}
				uni.getLocation({
					type: "gcj02", //wgs84 gcj02
					altitude: true,
					success(res) {
						console.log(res)
						let location = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						_this.$u.vuex('currentLocation', location)

						// qqmapsdk.reverseGeocoder({
						// 	location: {
						// 		latitude: res.latitude,
						// 		longitude: res.longitude
						// 	},
						// 	success(a) {
						// 		// _this.$store.commit('setVlocation', newLocation)
						// 	}
						// })
					},
				});
			},
			getVideo() {
				getVideo().then(res => {
					this.videoInfo = res.data
				})
			},
			closeVideo() {
				this.videoInfo.switch = false
			}
		},
		onLoad() {
			this.getMenu()
			this.getVLocation();
			this.getVideo();
		},
		onShow() {
			this.getHome();
			this.getHotGoods();
		}
	}
</script>

<style lang="scss">
	.notice {
		display: flex;
		background-color: rgba(45, 94, 171, 0.1);
		border-radius: 5rpx;
		margin-top: 20rpx;

		.icon {
			width: 80rpx;
			height: 80rpx;
		}

		.content-box {
			flex: 1;
			padding: 25rpx 15rpx;
		}
	}

	@keyframes fadenum {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-200px);
		}
	}

	.video-box {
		position: relative;

		.video-info {
			width: 100%;
			height: 360rpx;
		}

		.u-icon {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 999;
		}
	}

	page {
		background-color: #FFFFFF;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #FFFFFF;
			}
		}
	}

	//菜单
	.lb-grid-5 {
		position: relative;
		margin: 0 3rpx 24rpx;
		width: 100%;
		height: 174rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;

		display: grid;
		grid-template-columns: repeat(5, 1fr);

		.grid-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-icon {

				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;

			}

			.bg0 {
				background-color: #32D487;
			}

			.bg1 {
				background-color: #FFA754;
			}

			.bg2 {
				background-color: #F38071;
			}

			.bg3 {
				background-color: #5CD6E2;
			}

			.bg4 {
				background-color: #8397FE;
			}

			.item-label {
				font-size: $main-font-24;
				color: $main-font-color;
				margin-top: 12rpx;
			}
		}
	}


	// 菜单导航
	.lb-menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		// grid-row: ;
		grid-gap: 2rpx 2rpx;



		.lb-item {
			height: 116rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 0 52rpx;
			background-size: 100% 100%;
			background-position: 100% 100%;
			position: relative;

			.img-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			&:nth-of-type(1) {
				height: 236rpx;
				grid-row: 1 / span 2;

				.img {
					width: 120rpx;
					height: 120rpx;
				}
			}


			.name {
				position: relative;
				font-size: $main-font-28;
				font-weight: bold;
				color: $main-font-color-white;
			}

			.img {
				position: relative;
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	// VIP
	.lb-vip {
		height: 172rpx;
		// height: 86rpx;

		background-size: 100% 100%;
		background-position: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 12rpx;
		border-radius: 10rpx;

		.vip-left {
			height: 62rpx;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			justify-content: center;

			.vip-top {
				display: flex;
				flex-direction: row;
				align-items: center;


				image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					padding-top: 10rpx;

					text {
						font-size: $main-font-28;
						font-weight: bold;
						color: #7C562D;
						padding-left: 12rpx;

						&:nth-of-type(2) {
							font-size: $main-font-20;
							font-weight: 400;
							padding-bottom: 4rpx;
						}
					}
				}
			}

			.vip-equity {
				display: flex;

				view {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 12rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-size: $main-font-18;
						font-weight: 400;
						color: #B88443;
						margin-left: 2rpx;

					}
				}
			}
		}

		.vip-right {
			width: 128rpx;
			height: 48rpx;
			border: 1rpx solid;
			background: linear-gradient(124deg, #B07F42 0%, #976737 100%);
			opacity: 0.8;
			border-radius: 72rpx;
			font-size: $main-font-24;
			font-weight: 400;
			line-height: 46rpx;
			text-align: center;
			color: $main-font-color-white;
		}
	}

	//中部广告
	.lb-c-banner {
		margin-top: 10rpx;
		padding: 8rpx 0;
	}

	//优惠券
	.lb-coupon {
		width: 100%;
		height: 172rpx;
		margin-top: 20rpx;
	}

	//搜索
	.lb-search {
		width: 100%;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #E7E7E7;
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 44rpx;
		margin-top: 30rpx;
	}

	//标题
	.lb-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 36rpx 0 24rpx 0;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 12rpx;

		}

		text {
			font-size: 32rpx;
			font-weight: bold;
			color: $main-font-color;
		}
	}

	.lb-ad {
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		margin-bottom: 24rpx;

		.ad-img {
			width: 456rpx;
			height: 300rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 0 0 16rpx;

			}
		}

		.ad-info {
			width: calc(100% - 456rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			padding: 24rpx;

			.ad-name {
				font-size: $main-font-24;
				font-weight: bold;
				color: $main-font-color-grey6;
			}

			.ad-price {
				display: flex;
				flex-direction: row;
				align-items: center;

				.left {

					font-size: $main-font-36;
					font-weight: bold;
					color: #2F2D2E;

					&::before {
						content: '¥';
						font-size: $main-font-20;
					}

				}

				.right {
					font-size: $main-font-18;
					font-weight: 400;
					color: $main-font-color-grey6;
					padding-left: 12rpx;
				}
			}

			.vip-price {
				display: flex;
				flex-direction: row;
				// padding-left: 12px;

				image {
					width: 92rpx;
					height: 36rpx;
				}

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #7C562D;
					padding-left: 6rpx;
				}
			}

			.ad-btn {
				border: 2rpx solid #F67F7D;
				background: linear-gradient(131deg, #F7583F 0%, #F28F4C 100%);
				border-radius: 16rpx;
				font-size: $main-font-18;
				font-weight: 400;
				color: $main-font-color-white;
				width: 96rpx;
				height: 30rpx;
				line-height: 28rpx;
				text-align: center;
			}

			.ad-icon {
				width: 73rpx;
				height: 14rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>
